---
title: Themes
description: Add Theme to Fumadocs UI
---

import { WidthTrigger } from './theme';

## Usage

Initialize Tailwind CSS on your Next.js app, use the official Tailwind CSS plugin:

```json doc-gen:file
{
  "file": "./content/docs/example/tailwind.config.js",
  "codeblock": {
    "meta": "title=\"tailwind.config.js\""
  }
}
```

<Callout type="warn" title="ESM-Only">
  Use ESM syntax on your configuration file.
</Callout>

### Global Styles

By using the Tailwind CSS plugin, or the pre-built stylesheet, your default border, text and background
colors will be changed.

### Light/Dark Modes

Fumadocs supports light/dark modes with [`next-themes`](https://github.com/pacocoursey/next-themes).
The Theme Provider is a part of Root Provider.

See [Root Provider](/docs/ui/layouts/root-provider#theme-provider) to learn more.

### RTL Layout

RTL (Right-to-left) layout is supported.

To enable RTL, set the `dir` prop to `rtl` in body and root provider (required for Radix UI).

```tsx
import { RootProvider } from 'fumadocs-ui/provider';
import type { ReactNode } from 'react';

export default function RootLayout({
  children,
}: {
  children: ReactNode;
}): ReactNode {
  return (
    <html lang="en" suppressHydrationWarning>
      <body dir="rtl">
        <RootProvider dir="rtl">{children}</RootProvider>
      </body>
    </html>
  );
}
```

## CSS Variables

Fumadocs UI provides some CSS variables for customising the layout.

### Navbar Height

When the default navbar is replaced, the layout may overlap with your new navbar.

You should set the `--fd-nav-height` variable to the height of your navbar.

```css
:root {
  --fd-nav-height: 40px !important;
}
```

> You can use it with CSS media queries.

### Layout Width

Customise the max width of docs layout with CSS Variables.

```css
:root {
  --fd-layout-width: 1400px;
}
```

<WidthTrigger />

### Colors

The design system was inspired by [Shadcn UI](https://ui.shadcn.com), you can easily customize all colors using CSS variables.

```css title="global.css"
:root {
  /* hsl colors */
  /* use whitespace instead of comma */
  --fd-background: 0 0% 100%;
  --fd-foreground: 222.2 47.4% 11.2%;

  --fd-muted: 210 40% 96.1%;
  --fd-muted-foreground: 215.4 16.3% 46.9%;
}
```

> Only a subset of colors are provided by Fumadocs UI.
>
> It may not be compatible with Shadcn UI.

## Tailwind CSS Plugin [#docsui-plugin]

The official Tailwind CSS plugin introduces new colors and extra utilities including `steps`.

### Presets

It comes with many theme presets out-of-the-box, you can pick one you prefer rather than the default one.

```js
import { createPreset } from 'fumadocs-ui/tailwind-plugin';

/** @type {import('tailwindcss').Config} */
export default {
  presets: [
    createPreset({
      preset: 'ocean',
    }),
  ],
};
```

#### `neutral`

![Neutral](/themes/neutral.png)

#### `black`

![Black](/themes/black.png)

#### `vitepress`

![Vitepress](/themes/vitepress.png)

#### `dusk`

![Dusk](/themes/dusk.png)

#### `catppuccin`

![Catppuccin](/themes/catppuccin.png)

#### `ocean`

![Ocean](/themes/ocean.png)

#### `purple`

![Purple](/themes/purple.png)

### Typography

We have a built-in plugin forked from [Tailwind CSS Typography](https://tailwindcss.com/docs/typography-plugin).

The plugin adds a `prose` class and variants to customise it.

```tsx
<div className="prose">
  <h1>Good Heading</h1>
</div>
```

> The plugin works with and only with Fumadocs UI's MDX components, it may conflict with `@tailwindcss/typography`.
> If you need to use `@tailwindcss/typography` over the default plugin, [set a class name option](https://github.com/tailwindlabs/tailwindcss-typography/blob/main/README.md#changing-the-default-class-name) to avoid conflicts.

### Colors

Fumadocs UI has its own colors, animations, and utilities.
It adds the colors with a `fd-` prefix, you can reference them with the prefix like `bg-fd-background`.

To remove the prefix, enable `addGlobalColors`.

```js
import { createPreset } from 'fumadocs-ui/tailwind-plugin';

/** @type {import('tailwindcss').Config} */
export default {
  presets: [
    createPreset({
      addGlobalColors: true,
    }),
  ],
};
```
